<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid col-md-10 col-md-offset-1">
    <div class="navbar-header">
      <%= link_to root_path, class: "navbar-brand", id: "logo" do %>
        <%= image_tag('stories-logo.svg', height: 40, alt: "Stories") %>
      <% end %>
    </div>

    <ul class="nav navbar-nav filter-links">
      <li>
        <a href="#" data-behavior="editor-message">
        </a>
      </li>
    </ul>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="publish-button">
          <button class="button green-border-button dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            Publish <i class="fa fa-chevron-down"></i>
          </button>
          <ul class="dropdown-menu publish-dropdown nav-dropdown">
            <span class="dropdown-arrow-top"></span>
            <span class="dropdown-arrow-bottom"></span>
            <div>
              <h4>Ready to Publish your work?</h4>
              <p>Add tags to reach more people</p>
              <div class="clearfix" data-behavior="tags" data-tags="<%= @post.all_tags %>">
                <div id="js-taggle" style="position: relative;" data-behavior="autosave"></div>
              </div>
            </div>
            <hr />
            <div>
              <button class="button green-border-button pull-right" data-behavior="publish-button">Publish</button>
            </div>
          </ul>
        </li>
        <li id="notifications">
          <%= react_component('NotificationsContainer', {}) %>
        </li>
        <%= render 'layouts/avatar_dropdown' %>
      </ul>
    </div> 
  </div>
</nav>

